<template>
  <div class="player-bar">
    <div class="player-container">
      <div class="now-playing">
        <img
          :src="currentSong.cover"
          class="song-cover"
          v-if="currentSong.cover"
        />
        <div class="song-info">
          <div class="song-name">{{ currentSong.name || "未播放" }}</div>
          <div class="artist-name">{{ currentSong.artist || "暂无歌手" }}</div>
        </div>
      </div>

      <div class="player-controls">
        <i class="el-icon-arrow-left control-btn"></i>
        <i class="el-icon-video-play control-btn play-btn"></i>
        <i class="el-icon-arrow-right control-btn"></i>
      </div>

      <div class="progress-section">
        <span class="time current-time">{{ currentTime }}</span>
        <el-slider v-model="playProgress" class="progress-bar"></el-slider>
        <span class="time total-time">{{ totalTime }}</span>
      </div>

      <div class="extra-controls">
        <i class="el-icon-refresh-left control-btn"></i>
        <i class="el-icon-tickets control-btn"></i>
        <i class="el-icon-setting control-btn"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentSong: {
        name: "",
        artist: "",
        cover: "",
      },
      playProgress: 0,
      currentTime: "00:00",
      totalTime: "00:00",
    };
  },
  // 这里可以添加播放控制的逻辑
};
</script>

<style scoped>
.music-platform {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background-color: #252525;
  height: 64px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.nav-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 48px;
}

.logo-img {
  height: 36px;
  margin-right: 12px;
}

.logo-text {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.nav-menu {
  border: none;
  flex: 1;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-section {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 240px;
}

:deep(.el-input-group__append) {
  background-color: #ff4e4e;
  border-color: #ff4e4e;
  color: #fff;
  padding: 0 15px;
  cursor: pointer;
}

:deep(.el-input-group__append:hover) {
  background-color: #ff6b6b;
  border-color: #ff6b6b;
}

.main-content {
  margin-top: 64px;
  margin-bottom: 72px;
  flex: 1;
  max-width: 1200px;
  margin: 64px auto 72px;
}

.player-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 72px;
  background-color: #252525;
  border-top: 1px solid #333;
}

.player-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
  color: #fff;
}

.now-playing {
  display: flex;
  align-items: center;
  width: 280px;
}

.song-cover {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  margin-right: 12px;
}

.song-info .song-name {
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff;
}

.song-info .artist-name {
  font-size: 12px;
  color: #999;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
}

.control-btn {
  font-size: 20px;
  margin: 0 12px;
  cursor: pointer;
  color: #fff;
}

.control-btn:hover {
  color: #ff4e4e;
}

.play-btn {
  font-size: 32px;
}

.progress-section {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.progress-bar {
  flex: 1;
  margin: 0 12px;
}

.time {
  font-size: 12px;
  color: #999;
  width: 40px;
}

.extra-controls {
  width: 120px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

:deep(.el-menu--horizontal > .el-menu-item) {
  height: 64px;
  line-height: 64px;
  font-size: 16px;
}

:deep(.el-menu--horizontal > .el-menu-item.is-active) {
  border-bottom: 2px solid #ff4e4e;
}

.content-section {
  min-height: 100vh;
  padding: 40px;
  scroll-margin-top: 64px;
}

.content-section h1 {
  margin-bottom: 30px;
  color: #333;
  font-size: 28px;
}

.card-container,
.singer-container,
.album-container,
.playlist-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.music-card,
.singer-card,
.album-card,
.playlist-card {
  transition: transform 0.3s;
}

.music-card:hover,
.singer-card:hover,
.album-card:hover,
.playlist-card:hover {
  transform: translateY(-5px);
}

.card-image,
.singer-avatar,
.album-cover,
.playlist-cover {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}

.card-title,
.singer-name,
.album-title,
.playlist-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-desc,
.singer-fans,
.album-artist,
.playlist-count {
  font-size: 14px;
  color: #666;
}

.ranking-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.singer-card {
  transition: transform 0.3s;
  cursor: pointer;
}

.custom-ranking-table .el-table__header th {
  background-color: #f0f0f0;
  color: #333;
  font-weight: bold;
}

.rank-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-icon img {
  width: 24px;
  height: 24px;
}

.rank-icon span {
  font-size: 16px;
  font-weight: bold;
  color: #555;
}

.song-info {
  display: flex;
  align-items: center;
}

.song-cover {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 10px;
}

.el-table .el-table__body-wrapper {
  max-height: 600px;
}

.el-table .el-table__row:hover {
  background-color: #f9f9f9;
}
</style>
